import { createContext, FC, useState } from "react";
import { IContent, Itodo } from "./data";



const EMPTY: unique symbol = Symbol();
export const Content = createContext<IContent | typeof EMPTY>(EMPTY)

export const { Provider, Consumer } = Content


const Prv: FC = (props) => {

  const [state, setState] = useState<Itodo[]>([]);
  const addTodo = (val: Itodo) => {
    setState(pre => [...pre, val])
  }

  const toggleTodo = (id: number) => {
    setState(pre => {
      pre.forEach(item => {
        if (item.id === id) {
          item.completed = !item.completed
        }
      })
      return [...pre]
    })
  }

  const removeTodo = (id: number) => {
    setState(pre => [...pre.filter(item => item.id !== id)])
  }

  return (<Provider value={{
    todoList: state,
    addTodo,
    toggleTodo,
    removeTodo

  }}>{props.children}</Provider>)
}

export default Prv
